<!DOCTYPE html>
<html xmlns: xmlns:>

<head>
    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
    <link rel="stylesheet" type="text/css" href="css/home.css" charset="UTF-8"/>
</head>

<body>
<div id="app">
    <div id="book">

        <div class="container-fluid">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="top">
                        <div style="position:absolute;z-index:2;left:20px;top:0px;">
                            <img src="img/02-1图书管理-管理员_02.png" width="100" height="100">
                        </div>
                        <div style="position:absolute;z-index:2;right:20px;top:15px;">
                            <img src="img/图标02_03.png">
                        </div>
                        <div style="position:absolute;z-index:2;right:200px;top:20px;">
                            <img src="img/220_03.png">
                        </div>
                        <div style="position:absolute;z-index:2;right:70px;top:22px;">
                            <img src="img/退出%20(5).png">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12 column">

                            <div class="col-md-1 column" style="border-right:1px solid rgba(0,0,0,0.47);">
                                <div style="margin-top: 10px;">
                                    <div style="float:left;">
                                        <p style="color: rgba(0,0,0,0.47);">菜单项MENU</p>
                                    </div>
                                    <div style="float:right;">&gt;&gt;</div>
                                </div>

                            </div>
                            <div class="col-md-11 column">
                                <div style="float:left;margin-top: 10px">
                                    <p id="selectItem" style="color: rgba(0,0,0,0.47);">图书管理</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-1 column">

                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#">图书管理</a></li>
                        <li><a href="http://localhost:8080/adminHistory.html">借阅历史</a></li>
                    </ul>
                </div>
                <div class="col-md-11 column">
                    <button class="btn btn-default btn-primary" data-toggle="modal" data-target="#addModal">新增图书</button>
                    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
                        <div class="modal-dialog" style="width: 300px;">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="addModalLabel">
                                        新增图书
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label>&emsp;图书id:</label>
                                        <input id="bId" type="text" class="book-id" placeholder="请输入id">
                                    </div>
                                    <div class="form-group">
                                        <label>图书名称:</label>
                                        <input id="bName" type="text" class="book-name" placeholder="请输入书名">
                                    </div>
                                    <div class="form-group">
                                        <label>&emsp;出版社:</label>
                                        <input id="bPublish" type="text" class="book-from" placeholder="请输入出版社名">
                                    </div>
                                    <div class="form-group">
                                        <label>&emsp;&emsp;作者:</label>
                                        <input id="bAuthor" type="text" class="book-author" placeholder="请输入作者名">
                                    </div>
                                    <div class="form-group">
                                        <label>&emsp;&emsp;库存:</label>
                                        <input id="bStock" type="text" class="book-stock" placeholder="请输入数量">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="addBook()">
                                        确认
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                    <table class="table">
                        <thead>
                        <tr>
                            <th>
                                图书名称
                            </th>
                            <th>
                                出版社
                            </th>
                            <th>
                                作者
                            </th>
                            <th>
                                库存
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                        </thead>

                        <tbody v-for="(message,index) in messages.list" :key="index" v-model="messages[index]">
                        <div  >
                            <tr>
                                <td>
                                    {{message.bookname}}
                                </td>
                                <td>
                                    {{message.publish}}
                                </td>
                                <td>
                                    {{message.author}}
                                </td>
                                <td>
                                    {{message.stock}}
                                </td>
                                <td>
                                    <button  data-toggle="modal" data-target="#bianji" @click="bianji(message.id,message.bookname,message.publish,message.author,message.stock)">编辑</button>


                                    <div class="modal fade" id="bianji" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" style="width: 300px">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                                                </div>
                                                <div class="modal-body" id="model_input">
                                                    <span style="margin-top: 10px">id:&nbsp;&nbsp;&nbsp;</span>
                                                    <input type="text" id="input_id" value="" readonly="true">
                                                    <br>
                                                    <span style="margin-top: 10px">书名:&nbsp;&nbsp;&nbsp;</span>
                                                    <input type="text" id="input_bookname" value="" readonly="true">
                                                    <br>
                                                    <span style="margin-top: 10px">出版社:&nbsp;&nbsp;&nbsp;</span>
                                                    <input type="text" id="input_publish" >
                                                    <br>
                                                    <span style="margin-top: 10px">作者:&nbsp;&nbsp;&nbsp;</span>
                                                    <input type="text" id="input_author" >
                                                    <br>
                                                    <span style="margin-top: 10px">库存:&nbsp;&nbsp;&nbsp;</span>
                                                    <input type="text" id="input_stock" >



                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                                                    <button type="button" class="btn btn-primary" onclick="bianjiSubmit()">提交更改</button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
                                    </div>
                                    <span>&nbsp;|&nbsp;</span>
                                    <button @click="delete1(message.id)">删除</button>
                                </td>
                            </tr>
                        </div>
                        </tbody>

                    </table>
                    <div class="pageDiv" style="margin: 0 auto;">
                        <nav>
                            <ul class="pagination">
                                <li :class="{ disabled: messages.isFirstPage }">
                                    <a  href="#nowhere" @click="jump('first')">«</a>
                                </li>
                                <li :class="{ disabled: !messages.hasPreviousPage }">
                                    <a  href="#nowhere" @click="jump('pre')">‹</a>
                                </li>

                                <li  v-for="i in messages.pages">
                                    <a href="#nowhere" @click="jumpByNumber(i)" >
                                        {{i}}
                                    </a>
                                </li>

                                <li :class="{ disabled: !messages.hasNextPage }">
                                    <a  href="#nowhere" @click="jump('next')">›</a>
                                </li>
                                <li :class="{ disabled: messages.isLastPage }">
                                    <a  href="#nowhere" @click="jump('last')"> »</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div>

        </div>
    </div>

</div>

</body>




<script src="http://code.jquery.com/jquery-3.4.1.js " integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin=" anonymous "></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/axios.min.js"></script>

<script src="http://how2j.cn/study/fetch.min.js"></script>
<script>

    function jump(page,vue){
        if('first'== page && !vue.messages.isFirstPage)
            vue.list(vue.messages.firstPage);

        else if('pre'== page &&	vue.messages.hasPreviousPage )
            vue.list(vue.messages.prePage);

        else if('next'== page && vue.messages.hasNextPage)
            vue.list(vue.messages.nextPage);

        else if('last'== page && !vue.messages.isLastPage)
            vue.list(vue.messages.lastPage);
    }

    function jumpByNumber(start,vue){
        if(start!=vue.messages.pageNum)
            vue.list(start);
    }

    function bianji(id,bookname,publish,author,stock){
        $('#input_id').attr('value',id);
        $('#input_bookname').attr('value',bookname);
        $('#input_publish').attr('value',publish);
        $('#input_author').attr('value',author);
        $('#input_stock').attr('value',stock);

    }
    function bianjiSubmit() {
        var id = document.getElementById("input_id").value;
        var bookname = document.getElementById("input_bookname").value;
        var publish = document.getElementById("input_publish").value;
        var author = document.getElementById("input_author").value;
        var stock = document.getElementById("input_stock").value;
        alert("修改成功");
        $.ajax({
            type: "get",
            data: {
                "id": id,
                "bookname": bookname,
                "publish": publish,
                "author": author,
                "stock": stock
            },
            url: "http://localhost:8080/updateBook",
            dataType: "json",
            success: function(result) {
                    window.location.href = "http://localhost:8080/adminPage.html";
            },
            error: function(result) {
                window.location.href = "http://localhost:8080/adminPage.html";
            }
        });
    }
   function delete1(id){
        if(confirm("是否删除")){
            $.ajax({
                type: "post",
                data: {
                    "id": id
                },
                url: "http://localhost:8080/deleteBook",
                dataType: "json",
                success: function(result) {
                    window.location.href = "http://localhost:8080/adminPage.html";
                },
                error: function(result) {
                    window.location.href = "http://localhost:8080/adminPage.html";
                }
            });
        }

    }
    function addBook(){
        var bookid = $("#bId").val();
        var bookname = $("#bName").val();
        var publish = $("#bPublish").val();
        var author = $("#bAuthor").val();
        var stock = $("#bStock").val();
        $.ajax({
           type:"post",
           data:{
               "id":bookid,
               "bookname":bookname,
               "publish":publish,
               "author":author,
               "stock":stock
           } ,
            url:"http://localhost:8080/addBook",
            dataType:"json",
            success:function (result) {
                alert("添加成功")
                window.location.reload()
            },
            error:function (result) {
                alert("添加失败")
            }
        });
    }
    var vue = new Vue({
        el: '#app',
        data: {
            messages: []
        },
        methods: {
            list:function(start){
                self = this;
                start = start-1;
                url = "http://localhost:8080/listBook?start="+start;
                fetch(url).then(function (response) {
                    response.json().then(function (jsonObject) {
                        self.messages = jsonObject.data

                    })
                }).catch(function (err) {
                    console.log("Fetch错误:" + err);
                })
            },
            jump: function(page){
                jump(page,vue); //定义在adminHeader.html 中
            },
            jumpByNumber: function(start){
                jumpByNumber(start,vue);
            }
        },
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            this.list(1);
        },

    })
</script>
</body>

</html>